import { Button, Card, Form, Input, Space, message } from "antd";
import "./index.css";
import { useEffect, useState, type FormEvent, useRef } from "react";
import { get, post } from "../../utils/request";
import CreateBookModal, { type CreateBook } from "../../components/CreateBookModal";

interface Book {
  id: number;
  name: string;
  author: string;
  description: string;
  cover: string;
}

function BookManage() {
  const [bookList, setBookList] = useState<Array<Book>>([]);
  const [isCreateBookModalOpen, setIsCreateBookModalOpen] = useState(false);
  const createBookModalRef = useRef<any>(null);

  useEffect(() => {
    handleBookList();
  }, []);
  const createBook = async (values: CreateBook) => {
    await post("/book/create", values);
    handleBookList();
    message.success('图书添加成功！')
    setIsCreateBookModalOpen(false);
  };

  const handleCreateBook = async () => {
    const valid = await createBookModalRef.current?.handleFormValidate();
    if (!valid) {
      return;
    }
    await createBook(valid);
  }

  const handleBookList = async (name?: string) => {
    const res: any = await get("/book/list", { name });
    setBookList(res);
  };
  const handleSearch = (value: string) => {
    handleBookList(value);
  };


  return (
    <div id="bookManage">
      <h1>图书管理系统</h1>
      <div className="content">
        <div className="book-search">
          <Form
            name="search"
            layout="inline"
            colon={false}
            onValuesChange={(values) => handleSearch(values.name)}
            onFinish={(values) => handleSearch(values.name)}
          >
            <Form.Item label="图书名称" name="name">
              <Input placeholder="请输入图书名称" />
            </Form.Item>
            <Form.Item>
              <Space size="middle">
                <Button type="primary" htmlType="submit">
                  搜索图书
                </Button>
                <Button
                  type="primary"
                  htmlType="button"
                  className="add-btn"
                  onClick={() => setIsCreateBookModalOpen(true)}
                >
                  添加图书
                </Button>
              </Space>
            </Form.Item>
          </Form>
        </div>
        <div className="book-list">
          {bookList?.map((item) => (
            <Card
              key={item.id}
              className="book-card"
              hoverable
              cover={
                <img
                  alt="图书封面"
                  src={`http://localhost:3001/${item.cover}`}
                />
              }
            >
              <div className="book-info">
                <h2>{item.name}</h2>
                <h3>{item.author}</h3>
                <p className="book-description">{item.description}</p>
              </div>
              <Space className="book-actions">
                <Button type="primary">详情</Button>
                <Button type="primary">编辑</Button>
                <Button type="primary" danger>
                  删除
                </Button>
              </Space>
            </Card>
          ))}
        </div>
      </div>
      <CreateBookModal
        isOpen={isCreateBookModalOpen}
        handleClose={() => setIsCreateBookModalOpen(false)}
        handleOk={handleCreateBook}
        ref={createBookModalRef}

      />
    </div>
  );
}

export default BookManage;
